<template>
    <div class="portal-home-box" >
        <div class="welcome" v-show="!portalId">
            <div>
                <img src="@/assets/img/kong.png"/>
                <div style="text-align: center;color:#d8e0fc;font-size:24px;">{{$ti18('compomentLang.rightToolBar.welcomeTo','欢迎使用')}}{{$i18(curAppName,'应用名称')}}</div>
            </div>
        </div>
        <div v-show="portalId" class="portal-box" style="height: inherit">
            <PortalLayoutPreview @setPortalId="setPortalId" :appId="appId" :key="appId"></PortalLayoutPreview>
        </div>
    </div>
</template>

<script>
import useMain from "@/stores/useMain.js";
import { mapState,mapActions } from 'pinia';
import PortalLayoutPreview from "@/views/modules/portal/PortalLayoutPreview/PortalLayoutPreview.vue";

export default {
    name: "PortalHome",
    computed:{
        ...mapState(useMain,['menus']),
    },
    components:{
        PortalLayoutPreview
    },
    data() {
        return {
            portalId: "",
            appKey:'',
            appId:'',
            curAppName:''
        }
    },
    created(){
        this.init()
    },
    methods:{
        ...mapActions(useMain,['setCurApp']),
        setPortalId(portalId){
            this.portalId=portalId;
        },
        init(){
            this.portalId = '';
            let {query:{appKey,appId}} = this.$route ;
            this.appId = appId ??'';
            this.appKey = appKey ?? '';
            if(appId){
                let has = this.menus.find(item=>item.appId === appId);
                if(has){
                    this.curAppName = has.title ;
                }
                this.setCurApp({
                    appId,
                    name:has.title,
                    title:has.title
                })
            }
        }
    },
    watch:{
        $route:{
            handler(v){
                if(v.path === '/homeIndex'){
                    this.init()
                }
            },
            deep:true
        }
    }
}
</script>

<style scoped>
.welcome{
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.welcomeImg img{
    width: 150px;
}
.portal-home-box{
    height: 100%;
    background-color: rgba(240, 240, 240, 1);
}

</style>
